<template>
    <div class="main">
        <div class="filter-box">
            <div class="filter-left">
                <el-input
                    v-model.trim="condition.value"
                    maxlength="20"
                    style="width: 300px"
                    size="mini"
                    placeholder="请输入关键字"
                ></el-input>
                <span>区域：</span>
                <el-select v-model="condition.regionId" placeholder="请选择" size="mini" clearable>
                    <el-option
                        v-for="item in regionOptions"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
                <span>部门：</span>
                <el-select v-model="condition.deptId" placeholder="请选择" size="mini" clearable>
                    <el-option
                        v-for="item in depOptions"
                        :label="item.name"
                        :value="item.id"
                        :key="item.id"
                    ></el-option>
                </el-select>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="handleSearch">查询</el-button>
                <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-refresh-right"
                    @click="handleReset"
                >重置</el-button>
            </div>
            <div class="filter-right">
                <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-plus"
                    @click="handleOpenAddDialog"
                >添加</el-button>
                <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-delete"
                    @click="handDeleteAll"
                >删除</el-button>
            </div>
        </div>
        <!-- 表格 -->
        <el-table
            v-loading="loading"
            stripe
            element-loading-text="加载中"
            element-loading-spinner="el-icon-loading"
            height="100%"
            :data="tableData"
            tooltip-effect="dark"
            align="center"
            @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" fixed="left"></el-table-column>
          <el-table-column prop="enabled" label="状态" width="200">
            <template slot-scope="scope">
              <el-switch
                  disabled
                  v-model="scope.row.enabled"
                  active-color="#009999"
                  inactive-color="#ff4949"
                  active-text="启用"
                  inactive-text="禁用">
              </el-switch>
            </template>
          </el-table-column>
            <el-table-column
                v-for="item in tableHeader"
                :key="item.prop"
                :label="item.label"
                :prop="item.prop"
                show-overflow-tooltip
            ></el-table-column>
            <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                    <el-tooltip
                        class="item"
                        effect="dark"
                        :content="'编辑' + title"
                        placement="bottom-start"
                    >
                        <el-button
                            size="mini"
                            type="danger"
                            @click="handleOpenUpdateDialog(scope.row)"
                        >
                            <i class="el-icon-edit"></i>
                        </el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <!-- 页码 -->
        <div class="page-block">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-size="pageSize"
                layout="total, prev, pager, next, jumper"
                :total="total"
            ></el-pagination>
        </div>
        <!-- 添加/编辑员工  -->
        <el-dialog
            v-el-drag-dialog
            custom-class="custom-dialog"
            :visible.sync="dialog"
            :title="dialogTitleType"
            width="700px "
            append-to-body
        >
            <div style="height: 460px">
                <AddItem
                    v-if="dialog"
                    :is-update="isUpdate"
                    :current-id="currentId"
                    @succeed="handleSucceedAddOrUpdate"
                    @close="handleCloseDialog"
                />
            </div>
        </el-dialog>
    </div>
</template>
<script>
// components
import AddItem from './addItem'
import { getPersonnelList, deletePersonnelList } from '@/api/personnel'
import { getCommonList } from '@/api/common'

export default {
    components: {
        AddItem
    },
    data() {
        return {
            tableHeader: [
                { prop: 'name', label: '名称' },
                { prop: 'number', label: '工号' },
                { prop: 'phone', label: '手机' },
                { prop: 'email', label: '邮箱' },
                { prop: 'tagName', label: '标签名称' },
                { prop: 'regionName', label: '区域' },
                { prop: 'deptName', label: '部门' },
                { prop: 'remark', label: '备注' }
            ],
            // options
            // 地区
            regionOptions: [],
            // 部门
            depOptions: [],
            condition: {
                regionId: '',
                deptId: '',
                value: '',
                type: 1
            },
            tableData: [],
            loading: true,
            pageSize: 10,
            pageNo: 1,
            total: 0,
            selectOptions: [],
            //弹窗
            title: '员工',
            dialogTitleType: '',
            dialog: false,
            isUpdate: true,
            currentId: ''
        }
    },
    created() {
        [
            {
                id: 'region',
                field: 'regionOptions'
            },
            {
                id: 'dept',
                field: 'depOptions'
            }
        ].forEach((item) => {
            getCommonList(item.id).then((res) => {
                if (res.status !== 200) return this.$msgPrompt.error(res.msg)
                this[item.field] = res.obj
            })
        })
        this.getData()
    },
    methods: {
        //获取数据
        getData() {
            this.loading = true
            let obj = {
                pageSize: this.pageSize,
                pageNo: this.pageNo,
                ...this.condition
            }
            console.log(obj)
            getPersonnelList(obj)
                .then((res) => {
                    this.loading = false
                    if (res.status != 200) return
                    this.tableData = res.obj.records.map((el) => {
                        return { ...el, enableName: el.enabled ? '启用' : '禁用' }
                    })
                    this.total = res.obj.total
                })
                .catch((error) => {
                    this.loading = false
                })
        },
        //查询
        handleSearch() {
            this.pageNo = 1
            this.getData()
        },
        //重置
        handleReset() {
            for (const key in this.condition) {
                if (key !== 'type') {
                    this.condition[key] = null
                }
            }
        },
        //全选
        handleSelectionChange(val) {
            this.selectOptions = val
        },
        //页码点击 初始页pageNo、初始每页数据数pageSize和数据data
        handleCurrentChange(pageNo) {
            this.pageNo = pageNo
            this.getData()
        },
        // 删除
        handDeleteAll() {
            if (!this.selectOptions.length) return this.$msgPrompt.warning()
            this.$confirm(this.$confirmMsg, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$startLoading()
                    deletePersonnelList(this.selectOptions.map((i) => i.id)).then((res) => {
                        this.$endLoading()
                        if (res.status != 200) return this.$msgPrompt.error(res.msg)
                        this.$msgPrompt.success()
                        this.handleSearch()
                    })
                })
                .catch(() => {
                    this.$msgPrompt.info()
                })
        },
        // 开/关弹窗
        handleOpenUpdateDialog(row) {
            this.dialogTitleType = '编辑' + this.title
            this.isUpdate = true
            this.currentId = row.id
            this.dialog = true
        },
        handleOpenAddDialog() {
            this.dialogTitleType = '添加' + this.title
            this.isUpdate = false
            this.dialog = true
        },
        handleCloseDialog() {
            this.dialog = false
        },
        // 添加/修改成功
        handleSucceedAddOrUpdate() {
            this.dialog = false
            this.getData()
        }
    }
}
</script>
<style scoped lang="scss">
.main {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 10px 0 10px;

    .el-select {
        width: 200px;
    }

   ::v-deep .el-table {
     .el-switch__label {
       display: none;
     }
     .el-switch__label.is-active {
       display: inline-block;
     }
   }
}
</style>
